<template>
  <ActionPanel :loading="loading">
    <ElScrollbar>
      <div class="grid-box full">
        <div v-for="app in data" :key="app.name" class="item flex items-center" :class="{selected: appId == getAppId(app)}" @click="choose(app)">
          <img src="@/assets/imgs/logo.png" class="w-25px" />
          <ElText truncated>{{ app.label }}</ElText>
        </div>
        <!-- <div v-for="i in 10" :key="i" class="item flex items-center">
          <img src="@/assets/imgs/logo.png" class="w-25px" />
          <ElText truncated>我是中国人我爱自己的祖国你不是中国人所以你不爱自己的祖国{{ i }}</ElText>
        </div> -->
        <div class="item flex items-center" @click="open({title: '请填写应用信息'}, AppCreator, { onSave: refresh })">
          <Icon icon="ep:plus" />
          <ElText truncated>创建应用</ElText>
        </div>
      </div>
    </ElScrollbar>
  </ActionPanel>
</template>
<script setup lang="ts">
  import { computed, inject, onMounted, ref } from 'vue'
  import { ElScrollbar, ElText } from 'element-plus';
  import { setBreadcrumbs, currentApp, getAppId } from '@/views/seed-dev';
  import { App } from '@/views/types';
  import { closePopupKey, open } from '@/components/Popup';
  import { Icon } from '@/components/Icon';
  import { ActionPanel } from '@/components/ActionPanel';
  import AppCreator from './AppCreator.vue';
  import { appApi } from '@/api';

  const appId = computed(() => getAppId(currentApp.value))

  const close = inject<() => void>(closePopupKey, void 0)
  async function choose(app: App) {
    loading.value = true
    currentApp.value = await appApi.detail(app.name)
    loading.value = false
    setBreadcrumbs('app')
    close?.()
  }

  const loading = ref(false)
  async function refresh() {
    loading.value = true
    data.value = await appApi.list()
    loading.value = false
  }

  const data = ref()
  onMounted(async () => refresh())

  defineExpose({ refresh })
</script>
<style lang="less" scoped>
  .grid-box {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: 50px;
    grid-auto-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: 50px;
    gap: 5px;
  }
  .item {
    border: 1px Dashed var(--el-border-color);
    cursor: pointer;
    padding-left: 10px;
    padding-right: 10px;
  }
  .selected {
    border: 2px solid var(--el-color-primary);
  }
</style>